<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>编辑常见缺陷</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="cancel">返回</el-button>
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="缺陷名称" prop="defectName">
          <el-input v-model="form.defectName" placeholder="请输入缺陷名称" />
        </el-form-item>

        <el-form-item label="缺陷类型" prop="defectType">
          <el-select v-model="form.defectType" placeholder="请选择缺陷类型">
            <el-option
              v-for="item in defectTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="缺陷描述" prop="description">
          <el-input v-model="form.description" type="textarea" rows="3" placeholder="请输入缺陷描述" />
        </el-form-item>

        <el-form-item label="缺陷图片" prop="image">
          <el-upload
            class="upload-demo"
            action="#"
            :file-list="fileList"
            :auto-upload="false"
            :on-change="handleFileChange"
            list-type="picture"
          >
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'EditCommonDefects',
  data() {
    return {
      // 表单参数
      form: {
        id: undefined,
        defectName: '',
        defectType: '',
        description: '',
        image: ''
      },
      // 缺陷类型选项
      defectTypeOptions: [
        { value: '1', label: '外观缺陷' },
        { value: '2', label: '功能缺陷' },
        { value: '3', label: '材质缺陷' }
      ],
      // 上传文件列表
      fileList: [],
      // 表单校验
      rules: {
        defectName: [
          { required: true, message: '缺陷名称不能为空', trigger: 'blur' }
        ],
        defectType: [
          { required: true, message: '请选择缺陷类型', trigger: 'change' }
        ],
        description: [
          { required: true, message: '缺陷描述不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    const id = this.$route.params && this.$route.params.id;
    if (id) {
      this.getDefectInfo(id);
    }
  },
  methods: {
    /** 获取缺陷信息 */
    getDefectInfo(id) {
      // 模拟数据，实际应从后端获取
      setTimeout(() => {
        this.form = {
          id: id,
          defectName: '表面划痕',
          defectType: '1',
          description: '产品表面有明显划痕',
          image: ''
        };
        // 如果有图片，添加到文件列表
        if (this.form.image) {
          this.fileList = [{ name: '缺陷图片', url: this.form.image }];
        }
      }, 300);
    },
    /** 处理文件上传 */
    handleFileChange(file, fileList) {
      this.fileList = fileList.slice(-1); // 只保留最新上传的一个文件
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 实际应调用后端API
          this.$modal.msgSuccess("修改成功");
          this.cancel();
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.$router.push({ path: "/sb/CommonDefects" });
    }
  }
}
</script> 